<template>
    <div class="neirong_warp">
        <div class="neirong_warp_lis">
            <li v-for="(item, index) in breadcrumblist" :key="index" @click="breadcrumbClick(item, index)">
                <span v-if="index === breadcrumblist.length - 1" class="islast"> {{ item.name }}</span>
                <span v-else> {{ item.name + ' > ' }}</span>
            </li>

        </div>
        <div>
            <span v-for="soncity in districtslist" :key="soncity.code" class="citynamespan"
                @click="addreadcrum(soncity)">
                {{ soncity.name }}
            </span>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick} from "vue";
import xzqjson from '../../../../../public/data/json/zhuzhouxingzhengquhua.json'
const districtslist = ref(xzqjson.districts)
const emit = defineEmits(["itemClick"]);
const breadcrumblist = ref([
    {
        "code": "430200",
        "name": "株洲市",
        "level": "市级",
        "center": [113.16, 27.83],
        "parent": "湖南省",
    }
])

const breadcrumbClick = (item, index) => {
   breadcrumblist.value.splice(index+1)
    if (item.name === '株洲市') {
        districtslist.value = xzqjson.districts
    } else {
        districtslist.value = item.districts
    }
    emit('itemClick',item)
}

const addreadcrum = (item, index) => {
    breadcrumblist.value.push(item)
     emit('itemClick',item)
    districtslist.value = item.districts
}

onMounted(() => {

})
</script>

<style lang="less" scoped>
.neirong_warp {
    height: 100%;
    width: 100%;

    .neirong_warp_lis {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    li {
        list-style: none;
        color: #fff;
        margin-right: 0.3rem;
        cursor: pointer;

        .islast {
            color: #1DE0EF;
        }
    }

    .citynamespan {
        color: #fff;
        cursor: pointer;
        margin-right: 0.6rem;
        margin-top: 0.3rem;
    }
}
</style>